<script setup lang="ts">
import { useUpdateExplanation } from '@fl/api/purchase'
import SubmitBtn from '@fl/components/submit-btn.vue'
import { useMessage } from '@fl/hooks/web/use-message'
import { Editor } from '@fl/origin-components/Editor/index'
import { cloneDeep } from 'lodash-es'

import { PRICING_PRODUCT_STATUS_MAP } from '../goods-management/constant'

const props = defineProps<{
    detailData: {
        calcRule: string
        categoryId: string
        categoryName: string
        explanation: string
        priceProId: string
        productId: string
        productName: string
        specs: string
        status: number
    }
}>()
const emit = defineEmits<{
    publish: []
}>()

const { createMessage } = useMessage()
const router = useRouter()

const initialState = {} as any
const state = ref(cloneDeep(initialState))

const { isPending: isUpdateExplanationPending, mutate: updateExplanation } = useUpdateExplanation()

const isNotPublished = computed(() => props.detailData.status === PRICING_PRODUCT_STATUS_MAP.NOT_PUBLISHED)

// #region Form
const formRef = ref()
const isSubmitLoading = computed(() => isUpdateExplanationPending.value)

const rules = ref({
    // productCategory: [
    //     {
    //         message: '请选择商类目',
    //         // required: true,
    //         trigger: ['blur', 'change'],
    //     },
    // ],
    // productName: [
    //     {
    //         message: '请输入组合商品名称',
    //         // required: true,
    //         trigger: ['blur', 'change'],
    //     },
    // ],
})
// #endregion

// #region UI Listener
function onPublishBtnClick() {
    onSaveBtnClick(true)
}

function onSaveBtnClick(publishOnSuccess: boolean = false) {
    const params = {
        ...state.value,
        specs: JSON.stringify(state.value.specs),
    }

    updateExplanation(
        params,
        {
            onSuccess: () => {
                if (publishOnSuccess) {
                    emit('publish')
                }
                else {
                    createMessage.success('保存成功')
                }
            },
        },
    )
}

function onCancelBtnClick() {
    router.back()
}
// #endregion

watchEffect(() => {
    Object.assign(state.value, {
        ...props.detailData,
        specs: (props.detailData.specs && JSON.parse(props.detailData.specs)) || [],
    })
})

const data = computed(() => ({ }))

defineExpose({
    data,
})
</script>

<template>
    <div class="general-description">
        <div class="general-content">
            <div class="project-profile">
                <div class="label">
                    工程概况
                </div>

                <div class="form">
                    <el-form ref="formRef"
                             label-position="top"
                             :model="data"
                             :rules="rules"
                             label-width="auto"
                    >
                        <el-row :gutter="50">
                            <el-col :span="6">
                                <el-form-item label="组合商品名称"
                                              prop="productName"
                                >
                                    <el-input v-model="state.productName"
                                              disabled
                                    />
                                </el-form-item>
                            </el-col>

                            <el-col :span="6">
                                <el-form-item label="组合商品类目"
                                              prop="productCategory"
                                >
                                    <el-input v-model="state.categoryName"
                                              disabled
                                    />
                                </el-form-item>
                            </el-col>

                            <el-col :span="12" />

                            <el-col v-for="(item, index) in state.specs"
                                    :key="index"
                                    :span="6"
                            >
                                <el-form-item :label="item.label">
                                    <el-input v-model="item.value" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>

            <div class="compilation-illustration">
                <div class="label">
                    编制说明
                </div>

                <div class="editor">
                    <Editor v-model="state.explanation"
                            :height="290"
                            :can-upload-video="false"
                    />
                </div>
            </div>

            <div class="pt-50 flex w-full justify-center">
                <SubmitBtn v-if="isNotPublished"
                           type="primary"
                           :loading="isSubmitLoading"
                           @click="onPublishBtnClick"
                >
                    发布
                </SubmitBtn>

                <SubmitBtn v-if="isNotPublished"
                           type="primary"
                           :loading="isSubmitLoading"
                           @click="onSaveBtnClick"
                >
                    保存
                </SubmitBtn>

                <el-button @click="onCancelBtnClick">
                    取消
                </el-button>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.general-description {
    padding: 20px;
    background-color: white;
}
.label {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    margin-bottom: 20px;
}
</style>
